<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments :: samples-header"></head>
<body>
<div class="container">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title" th:text="'Temporal Java SDK Samples: ' + ${sample}">Temporal Java SDK Samples</h4>
            <h6>This is a simple greeting example. Enter persons first and last name then submit form to start
            workflow execution. Results will be updated on the page.</h6>
            <div class="form-group">
                <br/><br/><br/>
                <h5>Say hello to:</h5>
                <form action="/hello", id="sampleform">
                    <p>First Name: <input type="text" name="firstName"/></p>
                    <p>Last Name: <input type="text" name="lastName"/></p>
                    <p><input type="submit" value="Run Workflow" class="btn btn-primary" />
                        <input type="reset" value="Reset Form" class="btn btn-secondary" />
                </form>
            </div>
        </div>
        <div style="width: 18rem;">
            <div>
                <h5 class="card-title">Workflow result:</h5>
                <div id="result"></div>
            </div>
        </div>
    </div>
</div>
<script>
$("#sampleform").submit(function( event ) {
    event.preventDefault();

    var $form = $( this ),
        firstName = $form.find( "input[name='firstName']" ).val(),
        lastName = $form.find( "input[name='lastName']" ).val(),
        url = $form.attr( "action" );

    $.ajax({
        'url': url,
        'method':'POST',
        'dataType': 'json',
        'contentType': 'application/json',
        'data':JSON.stringify({
            "firstName": firstName,
            "lastName": lastName
        }),
        success: function(response) {
            $( "#result" ).empty().append( response );
        }
    });
});
</script>
<footer th:replace="fragments :: samples-footer"></footer>
</body>
</html>